
<template>
    <div class="da">
        <!-- header start -->
        <header class="mod-header">
            <h1>个人中心</h1>
            <img src="../assets/tup/zhuo.png" class="back">
        </header>
        <!-- header end -->
        <!-- section start -->
        <section class="mod-content personal">
            <!-- user start -->
            <div class="user">
                <div class="user-avatar">
                    <a class=""><img src="//sta.doumistatic.com/src/image/logo_default.png" alt=""></a>
                </div>
                <div class="user-name"></div>
                <div class="user-a">
                    <div class="user-phone">199*****663</div>
                    <div class="user-member">
                        <a href="">加入章鱼会员俱乐部&gt;</a>
                    </div>
                </div>

            </div>



            <div class="wallet">
                <div class="mod-a">
                    <span class="wallet-item fc-gray">钱包余额</span>
                    <br>
                    <b class="wallet-value fc-red">0.00</b>
                    <span class="fc-gray">元</span>
                    <span class="wallet-opt">提现</span>
                </div>
                <div class="mod-b">
                    <span class="wallet-item fc-gray">积分</span>
                    <br>
                    <b class="wallet-value fc-red">0</b>
                    <span class="fc-gray">分</span>
                    <span class="wallet-opt">兑换奖品</span>
                </div>
            </div>


            <div class="gemo"></div>
            <div class="shoge">
                <router-link to="/user.myjz">
                    div class="diyi">
                    <img src="../assets/tup/Snipaste_2023-02-16_16-37-48.png">
                    我的兼职
                    <img src="../assets/tup/Snipaste_2023-02-16_16-48-09.png" class="tv">
            </div>
            </router-link>
            < <div class="diyi">
                <img src="../assets/tup/Snipaste_2023-02-16_16-52-06.png">
                我的简历
                <img src="../assets/tup/Snipaste_2023-02-16_16-48-09.png" class="tv">
    </div>
    <div class="diyi">
        <img src="../assets/tup/Snipaste_2023-02-16_16-52-21.png">
        我的偏好
        <img src="../assets/tup/Snipaste_2023-02-16_16-48-09.png" class="tv">
    </div>

    </div>
    <div class="gemo"></div>

    <div class="m-menu mod-list bc-main com-border-bottom cospace">
        <div class="diyi">
            <img src="../assets/tup/Snipaste_2023-02-16_17-07-54.png">

            联系客服
            <span class="ds fr fc-red">4007-3333-00</span>
            <img src="../assets/tup/Snipaste_2023-02-16_16-48-09.png" class="tv">

        </div>
        <div class="diyi">
            <img src="../assets/tup/Snipaste_2023-02-16_17-08-24.png">
            意见反馈
            <img src="../assets/tup/Snipaste_2023-02-16_16-48-09.png" class="tv">

        </div>
        <div class="diyi">
            <img src="./tup/Snipaste_2023-02-16_17-08-44.png">
            密码设置
            <img src="../assets/tup/Snipaste_2023-02-16_16-48-09.png" class="tv">

        </div>
        <div class="diyi">
            <img src="../assets/tup/Snipaste_2023-02-16_17-11-01.png">
            注销账号
            <img src="../assets/tup/Snipaste_2023-02-16_16-48-09.png" class="tv">

        </div>
    </div>

    <div class="btn-group">
        <button class="btn" data-role="logout" type="button">退出</button>
    </div>

    <nav class="mod-crumb com-space">
        <a> 首页</a>>
        <a>个人中心</a>
    </nav>

    <footer class="mod-footer">
        <div class="footer-nav">
            <a class="nav-item1">
                <img src="../assets/tup/Snipaste_2023-02-16_17-36-24.png">
                <br>斗米APP下载<br><small>工资极速提现</small></a>
            <a class="nav-item2">
                <img src="../assets/tup/Snipaste_2023-02-16_17-36-59.png">
                <br>4007-3333-00<br><small>商家合作热线</small></a>
        </div>
        <p class="footer-cp"><span>©2015-2023 斗米™ 北京世诚优聘科技发展有限公司</span></p>
        <p class="footer-cp">京ICP备15058775号-1</p>
        <p class="footer-cp">违法和不良信息举报电话：010-57977110</p>
        <p class="footer-cp">违法和不良信息举报邮箱：jubao@doumi.com</p>
        <p class="footer-cp"><a target="_blank">网上有害信息举报</a></p>
    </footer>

    </section>

</div></template>

<script lang="ts" setup></script>


<style lang="scss" scoped>
.da {
    width: 100%;
    height: 500px;



    .mod-header {
        text-align: center;
        font-size: 12px;
        position: relative;
        width: 100%;
        height: 10%;

        .back {
            right: 44%;
            bottom: 34px;
            position: relative
        }
    }

    .mod-content {
        width: 100%;
        height: 150px;

        .user {
            background-color: #ffcc00;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;

            .user-avatar img {
                width: 50px;
                border-radius: 60px;
                border: solid 1px #ffe500;
                margin: 20px 0px 20px 20px;

            }

            .user-phone {
                font-size: 8px;
                margin-left: 30px;

            }

            .user-member {
                border-radius: 20px;
                background-color: #b28f00;
                font-size: 8px;
                margin-left: 30px;

            }

            .user-member a {
                text-decoration: none;
                color: #ffff;
                padding: 10px;
            }
        }

        .wallet {
            display: flex;

            .mod-a {
                border-right: solid 1px #f5f5f5;
                width: 50%;
                padding: 15px;

            }

            .mod-b {
                padding: 15px;
                width: 50%;
            }

            .wallet-item {
                font-size: 13px;
                color: #808080;
            }

            .wallet-value {
                color: #ff6600;
                white-space: pre-wrap;
            }

            .fc-gray {
                font-size: 13px;
                color: #808080;
            }

            .wallet-opt {
                margin-left: 50%;
                font-size: 13px;
                color: #404040;
            }
        }

        .gemo {
            width: 100%;
            height: 10px;
            background-color: #faf8ee;
            border: solid 1px #f5f5f5;
        }

        .diyi {
            vertical-align: middle;
            border-bottom: solid 1px #f6f6f6;
            padding: 10px;
        }


        .tv {
            float: right;

        }

        .ds {
            color: red;
            font-size: 10px;
            margin-left: 40%;
        }
    }

    .btn-group {
        width: 100%;
        height: 100px;
        background-color: #faf8ee;
        text-align: center;
    }

    .btn {
        padding: 15px 120px 15px 120px;
        background-color: #ffcc00;
        margin-top: 20px;
        border: 0;
        border-radius: 8px;
        font-size: 15px;
    }

    .mod-footer {
        .footer-nav {
            display: flex;
            background-color: #faf8ee;
        }

        .nav-item1 {
            width: 50%;
            text-align: center;
            margin-top: 20px;
            font-size: 13px;
            color: #808080;
        }

        .nav-item2 {
            width: 50%;
            text-align: center;
            margin-top: 20px;
            color: #808080;
        }

        .footer-cp {
            font-size: 10px;
            text-align: center;
            color: #999999;
        }
    }









}
</style>
<style lang="scss" scoped></style>